<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQmusic</title>
    <link rel="stylesheet" href="qqmusic.css">
</head>
<body>
    <!-- 顶部导航开始 -->
    <div class="header w">
        <a href=""><img src="./img/logo.png" alt="QQ音乐"></a>
        <ul>
            <li><a href="javascript:;" class="black_font">QQ音乐</a></li>
            <li><a href="javascript:;" class="black_font">音乐馆</a></li>
            <li><a href="javascript:;" class="black_font">我的音乐</a></li>
            <li><a href="javascript:;" class="black_font">客户端</a></li>
            <li><a href="javascript:;" class="black_font">音乐号</a></li>
            <li><a href="javascript:;" class="black_font">VIP</a></li>
        </ul>
        <button class="btn_fufeibao">开通付费包</button>
        <button class="btn_lvzuan">开通绿钻豪华版</button>
        <button class="btn_login">登录</button>
        <span class="search"><input type="text" placeholder="中国新歌声第二季" class="input_search"></span>
    </div>
    <!-- 顶部导航结束  -->
    <!-- 中间导航开始 -->
    <div class="nav">
        <div class="nav_shoufa w">
            <h1>新歌首发</h1>
            <ul class="nav_location">
                <li><a href="javascript:;">内地</a></li>
                <li><a href="javascript:;">港台</a></li>
                <li><a href="javascript:;">欧美</a></li>
                <li><a href="javascript:;">韩国</a></li>
                <li><a href="javascript:;">日本</a></li>
            </ul>
            <span class="all_location"><a href="javascript:;">全部&gt;</a></span>
            <ul class="navshoufa_neidi">
                <li>
                    <img src="./img/11.jpg" alt="">
                    <h3 class="navshoufa_title">我们的时光</h3>
                    <p class="navshou_zuhe">TFBOYS</p>
                </li>
                <li>
                    <img src="./img/12.jpg" alt="">
                    <h3 class="navshoufa_title">异想</h3>
                    <p class="navshou_zuhe">陈翔</p>
                </li>
                <li>
                    <img src="./img/13.jpg" alt="">
                    <h3 class="navshoufa_title">陪你听全世界</h3>
                    <p class="navshou_zuhe">丢火车乐队</p>
                </li>
                <li>
                    <img src="./img/14.jpg" alt="">
                    <h3 class="navshoufa_title">中国新歌声第二季 第四期</h3>
                    <p class="navshou_zuhe">中国新歌声</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 中间导航结束 -->
    <!-- 新歌首发部分开始 -->
    <div class="w nav_shoufa nav_hotsongs">
        <h1>新歌首发</h1>
        <ul class="navshoufa_neidi">
            <li>
                <img src="./img/21.jpg" alt="">
                <h3 class="navshoufa_title">我们的时光</h3>
                <p class="navshou_zuhe">TFBOYS</p>
            </li>
            <li>
                <img src="./img/22.jpg" alt="">
                <h3 class="navshoufa_title">异想</h3>
                <p class="navshou_zuhe">陈翔</p>
            </li>
            <li>
                <img src="./img/23.jpg" alt="">
                <h3 class="navshoufa_title">陪你听全世界</h3>
                <p class="navshou_zuhe">丢火车乐队</p>
            </li>
            <li>
                <img src="./img/24.jpg" alt="">
                <h3 class="navshoufa_title">中国新歌声第二季 第四期</h3>
                <p class="navshou_zuhe">中国新歌声</p>
            </li>
        </ul>
    </div>
    <!-- 新歌首发部分结束 -->
    <!-- mv部分开始 -->
    <div class="mv_firstplay">
        <div class="w nav_shoufa">
            <h1 class="mv_firstplay_title">MV首播</h1>
            <ul class="nav_location">
                <li>内地</li>
                <li>港台</li>
                <li>欧美</li>
                <li>韩国</li>
                <li>日本</li>
            </ul>
            <ul class="mv_firstplay_list">
                <li>
                    <img src="./img/31.jpg" alt="">
                    <h3 class="navshoufa_title">我们的时光</h3>
                    <p class="navshou_zuhe">TFBOYS</p>
                </li>
                <li>
                    <img src="./img/32.jpg" alt="">
                    <h3 class="navshoufa_title">异想</h3>
                    <p class="navshou_zuhe">陈翔</p>
                </li>
                <li>
                    <img src="./img/33.jpg" alt="">
                    <h3 class="navshoufa_title">陪你听全世界</h3>
                    <p class="navshou_zuhe">丢火车乐队</p>
                </li>
                <li>
                    <img src="./img/34.jpg" alt="">
                    <h3 class="navshoufa_title">中国新歌声第二季 第四期</h3>
                    <p class="navshou_zuhe">中国新歌声</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- mv部分结束 -->
    <!-- 底部开始 -->
    <footer class="footer">
        <div class="w footer_center">
            <div class="footer_center_left">
                <p> 下载QQ音乐客户端</p>
                <ul>
                    <li>
                        <div class="center_left_box1 img_1"></div>
                        <div class="center_left_box2">PC版</div>
                    </li>
                    <li>
                        <div class="center_left_box1 img_2"></div>
                        <div class="center_left_box2">Mac版</div>
                    </li>
                    <li>
                        <div class="center_left_box1 img_3"></div>
                        <div class="center_left_box2">Android版</div>
                    </li>
                    <li>
                        <div class="center_left_box1 img_4"></div>
                        <div class="center_left_box2">IPhone版</div>
                    </li>
                </ul>
                
            </div>
            <div class="footer_center_center">
                <p>特色产品</p> 
                <ul>
                    <li>
                        <div class="center_center_box1 center_images_1"></div>
                        <div class="center_center_box2">全民K歌</div>
                        <div class="center_center_box3">车载互联</div>
                    </li>
                    <li>
                        <div class="center_center_box1 center_images_2"></div>
                        <div class="center_center_box2">Super sound</div>
                        <div class="center_center_box3">QQ演出</div>
                    </li>
                    <li>
                        <div class="center_center_box1 center_images_3"></div>
                        <div class="center_center_box2">Qplay</div>
                    </li>
                </ul>
            </div>
            <div class="footer_center_right">
                <p>合作链接</p>
                <ul class="list_left">
                    <li>CJ E&M</li>
                    <li>最新版QQ</li>
                    <li>QQ浏览器</li>
                    <li>星钻</li>
                </ul>
                <ul class="list_center">
                    <li>腾讯视频</li>
                    <li>腾讯社交广告</li>
                    <li>QQ浏览器</li>
                    <li>画报</li>
                    <li>腾讯微云</li>
                </ul>
                <ul class="list_right">
                    <li>手机QQ空间</li>
                    <li>电脑管家</li>
                    <li>黄钻活动</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="w fotter_bottom">
                <ul class="fotter_bottom_links">
                    <li>关于腾讯</li>
                    <li>|</li>
                    <li>About Tencent</li>
                    <li>|</li>
                    <li>服务条款</li>
                    <li>|</li>
                    <li>用户服务协议</li>
                    <li>|</li>
                    <li>隐私政策</li>
                    <li>|</li>
                    <li>广告服务</li>
                    <li>|</li>
                    <li>腾讯招聘</li>
                    <li>|</li>
                    <li>客服中心</li>
                    <li>|</li>
                    <li>网站导航</li>
                </ul>
                <p>Copyright  1998 - 2017 Tencent. All Rights Reserved.</p>
                <p>腾讯公司©版权所有 腾讯网络文化经营许可证</p>
            </div>
        </div>
    </footer>
</body>
</html>